/*
 * @Author: chengsl
 * @Date: 2023-01-10 14:44:19
 * @LastEditors: chengsl
 * @LastEditTime: 2023-01-10 14:46:37
 * @Description: 百分比图 widgetPiePercentageChart
 */
export default {
  title: {
    text: '{nums|60}{percent|%}',
    x: 'center',
    y: 'center',
    textStyle: {
      rich: {
        nums: { fontSize: 40, color: '#00afee', fontWeight: 'bolder' },
        percent: { fontSize: 30, color: '#00afee', fontWeight: 'bolder' }
      }
    }
  },
  legend: {
    type: 'plain',
    orient: 'vertical',
    right: 0,
    top: '10%',
    align: 'auto',
    data: [
      { name: '1', icon: 'circle' },
      { name: '2', icon: 'circle' },
      { name: '3', icon: 'circle' },
      { name: '4', icon: 'circle' }
    ],
    textStyle: { color: 'white', fontSize: 16, padding: [10, 1, 10, 0] },
    selectedMode: false
  },
  series: [
    {
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: (params, api) => {
				return {
					type: 'arc',
					shape: {
						cx: api.getWidth() / 2,
						cy: api.getHeight() / 2,
						r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
						startAngle: ((0 + 0) * Math.PI) / 180,
						endAngle: ((90 + 0) * Math.PI) / 180
					},
					style: {
						stroke: '#0CD3DB',
						fill: 'transparent',
						lineWidth: 1.5
					},
					silent: true
				}
			},
      data: [0]
    },
    {
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: (params, api) => {
				return {
					type: 'arc',
					shape: {
						cx: api.getWidth() / 2,
						cy: api.getHeight() / 2,
						r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
						startAngle: ((0 + 0) * Math.PI) / 180,
						endAngle: ((90 + 0) * Math.PI) / 180
					},
					style: {
						stroke: '#0CD3DB',
						fill: 'transparent',
						lineWidth: 1.5
					},
					silent: true
				}
			},
      data: [0]
    },
    {
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: (params, api) => {
				return {
					type: 'arc',
					shape: {
						cx: api.getWidth() / 2,
						cy: api.getHeight() / 2,
						r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
						startAngle: ((0 + 0) * Math.PI) / 180,
						endAngle: ((90 + 0) * Math.PI) / 180
					},
					style: {
						stroke: '#0CD3DB',
						fill: 'transparent',
						lineWidth: 1.5
					},
					silent: true
				}
			},
      data: [0]
    },
    {
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: (params, api) => {
				return {
					type: 'arc',
					shape: {
						cx: api.getWidth() / 2,
						cy: api.getHeight() / 2,
						r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
						startAngle: ((0 + 0) * Math.PI) / 180,
						endAngle: ((90 + 0) * Math.PI) / 180
					},
					style: {
						stroke: '#0CD3DB',
						fill: 'transparent',
						lineWidth: 1.5
					},
					silent: true
				}
			},
      data: [0]
    },
    {
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: (params, api) => {
				return {
					type: 'arc',
					shape: {
						cx: api.getWidth() / 2,
						cy: api.getHeight() / 2,
						r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
						startAngle: ((0 + 0) * Math.PI) / 180,
						endAngle: ((90 + 0) * Math.PI) / 180
					},
					style: {
						stroke: '#0CD3DB',
						fill: 'transparent',
						lineWidth: 1.5
					},
					silent: true
				}
			},
      data: [0]
    },
    {
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: (params, api) => {
				return {
					type: 'arc',
					shape: {
						cx: api.getWidth() / 2,
						cy: api.getHeight() / 2,
						r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
						startAngle: ((0 + 0) * Math.PI) / 180,
						endAngle: ((90 + 0) * Math.PI) / 180
					},
					style: {
						stroke: '#0CD3DB',
						fill: 'transparent',
						lineWidth: 1.5
					},
					silent: true
				}
			},
      data: [0]
    },
    {
      type: 'pie',
      radius: ['58%', '45%'],
      silent: true,
      clockwise: true,
      startAngle: 90,
      z: 0,
      zlevel: 0,
      label: { normal: { position: 'center' } },
      data: [
        {
          value: 60,
          name: '',
          itemStyle: {
            normal: {
              color: {
                colorStops: [
                  { offset: 0, color: '#948BEA' },
                  { offset: 1, color: '#3BD6FF' }
                ]
              }
            }
          }
        },
        {
          value: 40,
          name: '',
          label: { normal: { show: false } },
          itemStyle: { normal: { color: '#0060FF' } }
        }
      ]
    },
    {
      name: 'percent',
      type: 'gauge',
      radius: '58%',
      center: ['50%', '50%'],
      startAngle: 0,
      endAngle: 359.9,
      splitNumber: 1,
      hoverAnimation: true,
      axisTick: { show: false },
      splitLine: { length: 19, lineStyle: { width: 0, color: '#061740' } },
      axisLabel: { show: false },
      pointer: { show: false },
      axisLine: { lineStyle: { opacity: 0 } },
      detail: { show: false },
      data: [{ value: 0, name: '' }]
    }
  ]
}
